<template>
  <el-container class="app-container">
    <wrapper-top
      v-if="hasWrapperTop"
      :navList="menuTop"
      :path="path"
      @setEnableSetMenuLeft="setEnableSetMenuLeft"
      @toggleCollapse="toggleCollapse"
    />
    <el-container v-if="(hasWrapperLeft && !isOnlyNavTop) || (isOnlyNavLeft && $route.meta.isNav)">
      <wrapper-left :key="menuLeftKey" :navList="menuLeft" :path="path" :isCollapse="isCollapse" />
      <wrapper-content :class="wrapperContentClass" />
    </el-container>
    <wrapper-content v-else :class="wrapperContentClass" />
  </el-container>
</template>

<script setup>
  import useUserInfo from '@c/useUserInfo';
  import WrapperLeft from './WrapperLeft';
  import WrapperTop from './WrapperTop';
  import WrapperContent from './WrapperContent';
  import {ref, computed, onUnmounted, onMounted, getCurrentInstance, watch} from 'vue';
  import {useStore} from 'vuex';
  import {useRouter, useRoute} from 'vue-router';

  // 基本数值
  const [store, router, route] = [useStore(), useRouter(), useRoute()];
  const {proxy} = getCurrentInstance();
  const {addOperationListener, removeOperationListener, isOnlyNavTop, isOnlyNavLeft} = useUserInfo(proxy);
  const routes = ref(router.getRoutes());
  const [hasWrapperTop, hasWrapperLeft, menuLeft, menuLeftKey, isEnableSetMenuLeft, isCollapse, path] = [
    ref(true),
    ref(true),
    ref([]),
    ref(Date.now()),
    ref(true),
    ref(false),
    ref(['/home'])
  ];

  // 计算属性
  const menuTop = computed(() => routes.value.filter(item => item.meta.index === 1 && item.meta.isNav));
  const wrapperContentClass = computed(() => {
    if (!hasWrapperTop.value && !hasWrapperLeft.value) return 'pd0';
    if (!hasWrapperLeft.value) return 'pd30';
    return 'pd20';
  });

  // 设置 是否需要配置左侧导航菜单
  const setEnableSetMenuLeft = enable => (isEnableSetMenuLeft.value = enable);
  const toggleCollapse = () => (isCollapse.value = !isCollapse.value);
  const refreshWrapper = () => {
    hasWrapperTop.value = route.meta.hasWrapperTop;
    hasWrapperLeft.value = route.meta.hasWrapperLeft;
  };
  const setMenuLeft = () => {
    if (isOnlyNavTop.value) return;
    if (isOnlyNavLeft.value) {
      menuLeft.value = menuTop.value;
      return;
    }
    if (!routes.value || !route.matched.length) return;
    const parentPath = route.matched[0].path;
    const parentRouteConfig = routes.value.find(item => item.path === parentPath);
    menuLeft.value =
      parentRouteConfig && parentRouteConfig.children ? parentRouteConfig.children.filter(item => item.meta.isNav) : [];
    // 顶部 + 左侧 这种导航结构，当点击顶部菜单时，才去更新左侧导航菜单，要给左侧导航菜单设置key不然多级导航展开的不会收缩
    menuLeftKey.value = Date.now();
    setEnableSetMenuLeft(false);
  };
  const setPath = () => {
    path.value = route.matched.length ? route.matched.map(item => item.path) : [route.path || '/home'];
  };
  const initLayout = () => {
    refreshWrapper();
    setPath();
    (isEnableSetMenuLeft.value || !menuLeft.value.length) && setMenuLeft();
  };

  // 监听路由变化
  watch(
    () => route.fullPath,
    () => {
      initLayout();
      // 若当前页面被内嵌则修改浏览器访问地址为实际访问地址
      window.self !== window.top && (top.location.href = window.location.href);
    }
  );
  onMounted(() => {
    initLayout();
    addOperationListener();
  });
  onUnmounted(removeOperationListener);
</script>

<style lang="less" scoped>
  .app-container {
    width: 100%;
    height: 100%;
    flex-direction: column;
  }
  .el-container {
    overflow: hidden;
  }
</style>
